<template>
  <div
    class="my-header"
    :style="{
      background: background,
      color: color,
    }"
  >{{ title }}</div>
</template>

<script>
// 目标: 让Header组件支持不同的项目 - 自定义
// 1. 分析哪些可以自定义 (背景色, 文字颜色, 文字内容)
// 2. (新知识点) 可以对props的变量的值 进行校验
// 3. 内部使用props变量的值
// 4. 外部使用时, 遵守变量名作为属性名, 值的类型遵守
export default {
  // props 的简写
  // props: ["background", "color", "title"],
  // props 校验数据写法(温馨提醒：校验写法没有代码提示，书写要小心)
  props: {
    background: String,    // background 类型必须是字符串，否则报错
    color: {
      type: String,
      default: "#fff",  // 默认值
    },
    title: {
      type: String,
      required: true,   // 必须传值
    },
  },
};
</script>

<style lang="less" scoped>
.my-header {
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #1d7bff;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
</style>